﻿@page "/admin/category"
@model Moonglade.Web.Pages.Admin.CategoryModel
@{
    ViewBag.Title = "Manage Categories";
}

@section scripts{
<script>
    var editCanvas = new bootstrap.Offcanvas(document.getElementById('editCatCanvas'));
    var catId = window.emptyGuid;

    function initCreateCategory() {
        catId = window.emptyGuid;
        document.querySelector('#edit-form').reset();
        editCanvas.show();
    }

    function editCat(id) {
        callApi(`/api/category/${id}`, 'GET', {},
            async (resp) => {
                var data = await resp.json();
                catId = data.id;
                document.querySelector('#EditCategoryRequest_RouteName').value = data.routeName;
                document.querySelector('#EditCategoryRequest_DisplayName').value = data.displayName;
                document.querySelector('#EditCategoryRequest_Note').value = data.note;
                editCanvas.show();
            });
    }

    function deleteCat(catid) {
        callApi(`/api/category/${catid}`, 'DELETE', {},
            (resp) => {
                document.querySelector(`#card-${catid}`).remove();
                blogToast.success('Category deleted');
            });
    }

    function confirmDelete(catid) {
        var cfm = confirm("Delete?");
        if (cfm) deleteCat(catid);
    }

    function handleSubmit(event) {
        event.preventDefault();

        var apiAddress = '';
        var verb = '';

        if (catId == window.emptyGuid) {
            apiAddress = '/api/category';
            verb = 'POST';
        }
        else {
            apiAddress = `/api/category/${catId}`;
            verb = 'PUT';
        }

        const data = new FormData(event.target);
        const value = Object.fromEntries(data.entries());

        callApi(apiAddress, verb,
            {
                routeName: value["EditCategoryRequest.RouteName"],
                displayName: value["EditCategoryRequest.DisplayName"],
                note: value["EditCategoryRequest.Note"]
            },
            (resp) => {
                document.querySelector('#edit-form').reset();
                editCanvas.hide();
                window.location.reload();
            });
    }

    const form = document.querySelector('#edit-form');
    form.addEventListener('submit', handleSubmit);
</script>
}

<div class="admin-toolbar ps-4 pe-4 pt-2 pb-2 border-bottom mb-3 shadow-sm">
    <a class="btn btn-outline-accent" href="javascript:initCreateCategory();">
        <i class="bi-plus-lg"></i>
        @SharedLocalizer["New"]
    </a>
    
    <a asp-action="ExportDownload" asp-controller="DataPorting" asp-route-type="Categories" class="btn btn-outline-accent" target="_blank">
        <i class="bi-upload"></i>
        @SharedLocalizer["Export"]
    </a>
</div>

@Html.AntiForgeryToken()

<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 ps-4 pe-4">
    @foreach (var cat in Model.Categories.OrderBy(m => m.DisplayName))
    {
        <div class="col">
            <div class="card shadow-sm" id="card-@cat.Id">
                <div class="card-body">
                    <h6 class="card-title">
                        <a asp-page="/CategoryList" asp-route-routeName="@cat.RouteName" target="_blank">
                            @cat.DisplayName
                        </a>
                    </h6>

                    <p class="mt-2 h-30px">
                        @cat.Note
                    </p>

                    <small class="text-muted">@cat.RouteName</small>
                </div>
                <div class="card-footer">
                    <a href="javascript:editCat('@cat.Id');" class="btn btn-sm btn-outline-accent btn-edit"><i class="bi-pen"></i></a>
                    <a href="javascript:confirmDelete('@cat.Id');" class="btn btn-sm btn-outline-danger btn-delete"><i class="bi-trash"></i></a>
                </div>
            </div>
        </div>
    }
</div>

<div class="offcanvas offcanvas-end" tabindex="-1" id="editCatCanvas" aria-labelledby="editCatCanvasLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="editCatCanvasLabel">@SharedLocalizer["Category Information"]</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <form id="edit-form" method="post">
            <div class="mb-3">
                <label class="form-label" asp-for="EditCategoryRequest.DisplayName"></label>
                <input asp-for="EditCategoryRequest.DisplayName" class="form-control" required />
            </div>
            <div class="mb-3">
                <label class="form-label" asp-for="EditCategoryRequest.RouteName"></label>
                <input asp-for="EditCategoryRequest.RouteName" class="form-control" required pattern="(?!-)([a-z0-9-]+)" />
                <small class="text-muted">
                    @SharedLocalizer["lower case English letters (a-z) and numbers (0-9) with/out hyphen (-) in middle."]
                </small>
            </div>
            <div class="mb-3">
                <label class="form-label" asp-for="EditCategoryRequest.Note"></label>
                <input asp-for="EditCategoryRequest.Note" class="form-control" required />
            </div>
            <div class="mt-3">
                <button type="submit" class="btn btn-accent">@SharedLocalizer["Submit"]</button>
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="offcanvas">@SharedLocalizer["Cancel"]</button>
            </div>
        </form>
    </div>
</div>
